/*
"WE NEVER GIVE PERMISSION TO COPY ALL SOURCE CODE, ALL RIGHTS RESERVED"
*/

/*!
Blogger Template Name
Name: Articsocie
Designer: imam.putra.pupu
URL: https://plus.google.com/117986839924849705015
*/

h2.post-title {
color: #666666;
}

.post img {
background:#FFFFFF;
border: 1px solid #DDDDDD; 
max-width: 95%;
padding: 1px;
}

.post-body {
color:#555555;
font-family: Ubuntu,Arial,Ssans-serif;
font-size:14px;
line-height:140%;
padding: 2% 2% 2% 2%;
text-align:justify;
}
        
.post-body h1 {
font-size:30px;
}

.post-body h2 {
font-size:24px;
}
.post-body h3 {
font-size:20px;
}

.post-body h4 {
font-size:18px;
}

.post-body h5{
font-size:16px;
}

.post-body h6{
font-size:14px;

}
        
.separator a {
margin: 0 !important;
}

blockquote {
background-color: #5D73B5;
border: 1px solid #475B9A;
border-radius: 5px;
color: #FFFFFF;
font: normal 12px Monaco,"Courier New",Courier,monospace !important;
-khtml-border-radius: 5px;
margin: .75em 0;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
padding: 15px 20px;
position: relative;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
-webkit-border-radius: 5px;
}

blockquote a,blockquote a:visited {
color:#FFEAE5!important;
}

blockquote:before {
border-color: transparent transparent #5D73B5;
border-style: solid;
border-width: 7px;
bottom: 100%;
content: "";
height: 0;
position: absolute;
right: 15px;
width: 0;
}

.post-body blockquote {
line-height:1.3em;
}
.post-body blockquote code {
background-color: transparent;
color: #DDDDDD;
font-weight: 400;
text-shadow: none;
}

blockquote.ask {
border-bottom: 4px solid #2E3B62;
border-top: 4px solid #2E3B62;
}

blockquote.ask:before {
border: 7px solid transparent;
border-top-color: #2E3B62;
bottom: auto;
top: 0px;

}

pre,i[rel="pre"] {
background-color: #DDDDDD;
border-left: 4px solid #B8B8B8;
display: block;
font: normal 12px Monaco,"Courier New",Courier,monospace !important;
overflow: auto;
padding: 5px .5em 5px 1em;
position: relative;
white-space: pre;
word-wrap: normal;
}

pre:hover,i[rel="pre"]:hover {
background-color: #DDDDDD;
}

pre code {
color: #666666;
display: block;
font: normal 12px Monaco,"Courier New",Courier,monospace !important;
letter-spacing: 0;
text-shadow: none;
white-space: pre;
}

pre[rel="HTML"],pre[data-codetype="HTML"] {
border-left-color: #4584BE;
}

pre[rel="CSS"],pre[data-codetype="CSS"] {
border-left-color: #5DA028;
}

pre[rel="JavaScript"],pre[data-codetype="JavaScript"] {
border-left-color: #BBBBBB;
}

pre[rel="JQuery"],pre[data-codetype="JQuery"] {
border-left-color: #7073CF;
}

pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"] {
border-left-color: #E36B23;
}

pre[rel="XML"],pre[data-codetype="XML"] {
border-left-color: #C44032;
}

pre[rel*="+"],pre[data-codetype*="+"] {
border-left-color: #ABABAB;
}

pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc {
color: #FF99FF;
font-style: italic;
}

pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title {
color: #FF66FF;
}

pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {
color: #333333;
}

pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id {
color: #103197;
}

pre .tag .title,pre .rules .property,pre .django .tag .keyword {
font-weight: bold;
}

pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell { 
color: #0486B9;
}

pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata {
color: #EF9771;
}

pre .deletion {
color: #DC322F;
}

pre .tex .formula {
background: #073642;
}

pre.numbered {
border-left-width: 2px;
padding-left: 1em;
}

pre .line-number,pre.numbered code {
display: block;
line-height: 16px;
}

pre .line-number {
border-right: 2px solid #711;
color: #586E75;
float: left;
margin: 0 1em 0 -1em;
min-width: 35px;
text-align: right;
}

pre .line-number span {
display: block;
padding:0 .5em 0 1em;
position: relative;
}

pre .line-number span:nth-child(even) {
background-color: #FAFAFA;
}

pre .line-number span em {
background-color: orange; 
border: 1px solid black;
bottom: -1px;
color: black;
display: none;
font-style: normal; 
left: 100%;
padding: 0 2px 1px 2px;
position: absolute;
}

pre .line-number span:hover em {
display: block;
}

pre .line-number span:target a {
background-color: #268BD2;
color: white;
display: block; 
margin: 0 -.5em 0 -1em;
padding: 0 .5em 0 0;
position: relative;
}

pre.numbered code span {
line-height: 12px;
}

pre[data-codetype="HTML"] .line-number span:target a {
background-color: #4584BE;
}

pre[data-codetype="CSS"] .line-number span:target a {
background-color: #5DA028;
}

pre[data-codetype="JavaScript"] .line-number span:target a {
background-color: #BBBBBB;
}

pre[data-codetype="JQuery"] .line-number span:target a {
background-color: #7073CF;
}

pre[data-codetype="JQuery UI"] .line-number span:target a {
background-color: #E36B23;
}

pre[data-codetype="XML"] .line-number span:target a {
background-color: #C44032;
}

pre[data-codetype*="+"] .line-number span:target a {
background-color: #ABABAB;
}

pre .line-number span:target:before {
content: "";
display: block;
height: 150px;
margin-top: -150px;
visibility: hidden;
}

pre code mark {
background: white;
}

.alert {
background: url(http://strumpet.googlecode.com/svn/branches/image/alert.png) no-repeat scroll left center transparent;
font-style: italic;
margin: 10px 5px !important;
min-height: 25px;
padding: 10px 10px 10px 35px !important;
text-decoration: underline;
}
    
#comments h4 {
background: #FCFCFC;
border:1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
color: #666666;
display: block;
font: bold 14px Droid Serif,Arial,Sans-Serif;
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
margin: 10px 0 5px 0;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
padding: 8px 0 8px 1%;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
text-transform: none;
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
width: 97%;
}

#comments h5 {
background: #FCFCFC;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
color: #666666;
display: block;
font: bold 14px Droid Serif,Arial,Sans-Serif;
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
margin: 10px 0 0px 0;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
padding: 8px 0 8px 1%;
text-shadow:1px 1px 1px rgba(0,0,0,0.1);
text-transform: none;
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
width: 97%;
}

.comment_body textarea {
display: block;
max-width: 100%;
overflow: hidden;
width: 100%;
}

.unneeded-paging-control {
display: none;
}

.comment_child .comment_wrap {
padding: 0 0 0 20px;
}

.comment_inner {
background: #FCFCFC;
border: 1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
display: inline-block;
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
margin: 5px 0 5px 0;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
outline: none;
overflow: hidden;
text-shadow:1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
width: 98%;
zoom: 1;
}
        
div:target .comment_inner,.selected .comment_inner {
border: 3px solid #A6A6A6;
padding: 0px;
transition: all 7s ease-out; 
}

.comment_inner:hover {
border: 1px solid #CCCCCC;
transition: all 1.2s ease-out;
}

.comment_header {
margin: 15px 15px 5px 15px;
}

.comment_avatar img {
border: 1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
margin: 0 15px 0 0;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow :0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

.comment_avatar .avatar-image-container {
background: url(http://strumpet.googlecode.com/svn/branches/image/anonymous_thumb.png) no-repeat 2px 0px;
float: left;
height: 50px!important;
width: 50px!important;
}
        
.comments .avatar-image-container img {
height: 50px!important;
width: 50px!important;
}

.comment_name {
background: #FCFCFC;
border: 1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
color: #666666; 
font: bold 13px Droid Serif,Arial,Sans-Serif;
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
line-height: 1;
margin: 0px 0 0 58px;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
padding: 7px 0 7px 10px;
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

.comment_name a {
color: #0E8FEC;
text-decoration: none;
}

.comment_name a:hover {
color: #666666;
}

.comment_service {
background: #FCFCFC;
border: 1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
color: #888888;
font: normal 10px Tahoma,Arial,Sans-Serif;
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
margin: 5px 0 0 58px;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
padding: 2px 0 2px 10px;
text-decoration: none;
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

#comment_r {
margin: 0px 15px 15px 15px;
padding:0px;
}

.comment_reply {
background: #FCFCFC;
border: 1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
clear: both;
float: left;
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
margin: 0px;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
padding: 2px 10px 2px 11px;
transition: all 0.16s ease-in-out;
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

.comment-delete {
background: #FCFCFC;
border: 1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
clear: both;
float: left;
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
margin: 4px 0 0px 0;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
padding: 2px 7px 2px 7px;
transition: all 0.16s ease-in-out;
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

.comment_reply:link, .comment-delete:link {
color: #0E8FEC;
font: normal 10px Tahoma,Arial,Sans-Serif;
text-decoration: none;
text-transform: uppercase;
}

.comment_reply:hover, .comment-delete:hover {
color: #666666;
text-decoration: none;
}

.deleted-comment {
color: #FA0053;
font: bold 13px Ubuntu, Tahoma,Arial,Sans-Serif;
margin: 0px 0px 10px 6px;
padding: 10px 0px 0px 5px;
text-align: center;
}

.comment_body p {
background: #FCFCFC;
border:1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
color: #666666;
font:normal 13px Ubuntu,Arial,Sans-Serif;
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
line-height: 16px;
margin: 10px 0px 10px 58px;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
padding:12px 10px 11px 10px;
text-align: justify;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
word-wrap: break-word;
}

.comment-form {
background: #FCFCFC;
border: 1px solid #FFFFFF;
box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-khtml-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
max-width: 98%;!important;
-moz-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
text-shadow:1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 48px #EAE9E1 inset,0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

#comment-editor {
padding-left: 15px;
width: 98%!important;
}
.comment_admin {
background: #fcfcfc url(http://strumpet.googlecode.com/svn/branches/image/author_mark.png) no-repeat top right;
display: block;
}

.comment_form a {
color: #0E8FEC;
font: bold 0px Arial,Sans-serif;
text-decoration: none;
text-transform: none;
}

.comment_form a:hover {
text-decoration: none;
}

.comment_reply_form {
border-left: 0px solid #999999;
padding: 0 0 0 0px;
}

.comment_reply_form .comment-form {
width: 99%;
}

#commentartic {
border: 1px solid #DDDDDD;
border-radius: 2px;
color: #666666;
float: left;
font: 12px Ubuntu,Arial,Sans-Serif !important;
-khtml-border-radius: 2px;
margin: 1%;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
padding-bottom: 0%;
text-decoration: none;
text-shadow:0px 1px 1px rgba(0,0,0,0.1);
-webkit-border-radius: 2px;
width: 96%;
}

p.commentsocie {
border: 1px solid #FFFFFF;
border-radius: 2px;
-khtml-border-radius: 2px;
line-height: 15px;
margin-bottom: 0%;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
padding: 5px 10px 10px 10px;
position: relative;
-webkit-border-radius: 2px;
}    

p.commentsocie span {
display: block;
margin-bottom: 15px;
}

.emoWrap {
color: #222222;
font: bold 12px Tahoma,Arial,Sans-Serif;
padding: 5px 7px 0px 7px;
text-align: center;
}
     
img.emo, input.emoKey {
*display: inline;
display: inline-block;
vertical-align: middle;
}

input.emoKey {
background-color: #FFFFFF;
border:1px solid #CCCCCC;
color: #222222;
font: bold 11px Arial,Sans-Serif;
margin: 0px 0px 0px 2px;
padding: 1px 2px;
}

.comment_youtube {
display:block;
height:225px;
margin:auto;
max-width:100%!important;
width:75%;
}

.comment_img {
max-width:100%!important;
}

.comment_body p img {
max-width:100%!important;
}

.buttonblue.small.right {
margin: 0 0 0 10px;
}

.buttonblue.small {
background-color: #51B1F5;
background-image: linear-gradient(top,#82C7F8,#219BF2);
background-image: -moz-linear-gradient(top,#82C7F8,#219BF2);
background-image: -o-linear-gradient(top,#82C7F8,#219BF2);
background-image: -webkit-linear-gradient(top,#82C7F8,#219BF2);
border: 1px solid #999;
border-radius: 2px;
box-shadow: 0 0px 1px rgba(0,0,0,0.3);
color: #F9F9F9;
cursor: pointer;
font: bold 11px Arial,Sans-Serif;
-khtml-border-radius: 2px;
-khtml-box-shadow: 0 0px 1px rgba(0,0,0,0.3);
margin: 20px 0px 20px 1px;
-moz-border-radius: 2px;
-moz-box-shadow: 0 0px 1px rgba(0,0,0,0.3);
-moz-transition:none;
-ms-border-radius: 2px;
-ms-transition:none;
-o-border-radius: 2px;
-o-box-shadow: 0 0px 1px rgba(0,0,0,0.3);
-o-transition:none;
padding: 3px 8px;
position: relative;
text-decoration: none;
text-shadow: 0 0px 1px rgba(0,0,0,0.3);
text-transform: uppercase;
top: -1px;
transition: none;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 0px 1px rgba(0,0,0,0.3);
-webkit-transition:none;
}

.buttonblue.small:hover {
background-color:#219BF2;
background-image:linear-gradient(top,#39A6F3,#0C81D4);
background-image:-moz-linear-gradient(top,#39A6F3,#0C81D4);
background-image:-o-linear-gradient(top,#39A6F3,#0C81D4);
background-image:-webkit-linear-gradient(top,#39A6F3,#0C81D4);
}

.buttonblue.small:active{top:0;background-color:#39A6F3;
background-image:linear-gradient(top,#51B1F5,#0E8FEC);
background-image:-moz-linear-gradient(top,#51B1F5,#0E8FEC);
background-image:-o-linear-gradient(top,#51B1F5,#0E8FEC);
background-image:-webkit-linear-gradient(top,#51B1F5,#0E8FEC);
}

@media screen and max-device-width 480px {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}